Extend your Web Application to Android - An Example of Google Calendar
Robbie Cheng, Engineer, Potix Corporation
Feb 5, 2008
Applicable to ZK 3.0.2
- Applicable to ZK Mobile for Android 0.8.1
- Applicable to ZK Google Calendar 0.8.1
Introduction
The importance of mobile devices is growing rapidly in the world. Thus, it is difficult to satisfy user's need by providing web application only. It's a must to extend your web application to mobile devices. And, ZK helps you to finish the job with ease since mobile devices are supported by ZK Mobile, including J2ME and Android.
Besides, due to the characteristics of server-centic, most of your codes could be reusable. In the following paragraphs, I am going to show you how to write a mobile calendar application for Android using the library of ZK Google Calendar.
Live Demo
First of all, let's take a look the live demo.
Login
The first page of this application is a login page as follows,
<frame title="Google Calendar" visible="true">
<image src="/img/calendar.jpg" width="100" height="30"/>
<box orient="horizontal">
<label value="Email:" width="70"/><textbox id="email" width="190" />
</box>
<box orient="horizontal">
<label value="Password:" width="70"/><textbox id="pwd" width="190" type="password"/>
</box>
<button label="Login">
<attribute name="onClick">
session.setAttribute("email",email.value);
session.setAttribute("pwd",pwd.value);
Executions.getCurrent().sendRedirect("list.hil");
</attribute>
</button>
</frame>
Browse Your Google Calendar
The second page is about how to retrieve those schedules from google calendar, and then shows the result on Android.
<frame id="win" title="ZK Mobile for Android" visible="true" use="org.zkforge.zkand.gcal.GcalController"
onCreate="self.onToday()">
<image src="/img/calendar.jpg" width="100" height="30"/>
<box orient="horizontal">
<button label="Prev" forward="win.onPrevious"/>
<button label="Today" forward="win.onToday"/>
<button label="Next" forward="win.onNext"/>
</box>
<box id="schedule" height="100">
<listbox id="lbx" model="" use="org.zkforge.zkand.gcal.CalendarListbox"/>
</box>
<button label="Add a new schedule" onClick="win.visible = false; add.visible = true"/>
</frame>
Add a New Schedule
The last page is related to create a new schedule to Google Calendar.
<frame id="add" title="Google Calendar" use="org.zkforge.zkand.gcal.InsertController">
<image src="/img/calendar.jpg" width="100" height="30"/>
<box orient="horizontal">
<label value="Title:" width="100"/>
<textbox id="title" width="100" />
</box>
<box orient="horizontal">
<label value="Date:" width="100"/>
<datebox id="date" />
</box>
<box orient="horizontal">
<label value="Start Time:" width="100"/>
<timebox id="start" />
</box>
<box orient="horizontal">
<label value="End Time:" width="100"/>
<timebox id="end" />
</box>
<box orient="horizontal" >
<label value="Description:" width="100"/>
<textbox id="desc" width="150" />
</box>
<box orient="horizontal">
<button label="Add schedule" onClick="add.insertEvent(); win.onToday(); win.visible = true;
add.visible = false"/>
<button label="Back to calendar" onClick="win.visible = true; add.visible = false"/>
</box>
</frame>
Download
Summary
In this smalltalk, I've demonstrate you how to extend your web application to mobile devices with ease. You might understand the beauty of server-centric framework, and how it illustrated the concept of "write once, and run everywhere." In the future, more Android widgets will be supported, and even more mobile devices will be supported, ex Windows mobile. Your comment is precious to us, please give us your feedback, and I will appreciate it.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |